<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <fieldset>
        <el-form-item label-width="50%">
          <!--action  请求后台接口 -->
          <el-upload
            class="avatar-uploader"
            action="/api/consumerUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.cimage" :src="form.cimage" v-modle="form.cimage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.cname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.cpass"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.csex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.ctel"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.caddress"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <!--        <el-form-item label="即时配送">-->
        <!--          <el-switch v-model="form.delivery"></el-switch>-->
        <!--        </el-form-item>-->
        <el-form-item style="text-align: center">
          <el-button type="primary" size="small" round @click="insert">提交</el-button>
          <el-button type="info" size="small" round @click="">取消</el-button>
        </el-form-item>
      </fieldset>
    </el-form>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        form: {
          cname: '',
          cpass: '',
          csex: '',
          ctel: '',
          cimage: '',
          caddress: '',
          email: '',
          code:'123',
        }
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.cimage = URL.createObjectURL(file.raw);
        this.form.cimage = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      insert: function() {
        axios.post("/api/addConsumer", this.form).then(res => {
          if (res.data == success) {
            this.$router.push("/consumer/");
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    }

  }
</script>

<style scoped>
  /*fieldset {*/
  /*  !* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*!*/
  /*  border: 2px solid #DCDFE6;*/
  /*  text-align: left;*/
  /*  border-radius: 8px;*/
  /*  margin: 0 auto;*/
  /*  width: 50%;*/
  /*}*/
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
